<template>
    <div class="hello">
        <el-container>
            <el-header style="height: 80px">
                <div class="head">
                    <div class="m">
                        <div class="lf logo">
                            <img src="http://www.sdjt.com/images/1.png" width="245" height="60">
                        </div>
                    </div>
                </div>
                <div class="dh">
                    <el-link class="el_li" @mouseleave.native="index=0">
                        <router-link to="/wrj">首页</router-link>
                    </el-link>
                    <el-link class="el_li" @mouseenter.native="index=1">
                        <router-link to="/wrj/two">走进盛达</router-link>
                    </el-link>
                    <div class="conn1" v-if="index==1" @mouseleave="index=0">
                        <div style="width: 600px; height: 300px; margin: 30px 0 350px 0">
                            <div style="text-align: left; font-size: 18px ">走进盛达</div>
                            <p style="text-align: left ; font-size: 14px ">盛达集团成立于1992年，从甘肃发展壮大，历经近三十年的发展，产业布局矿业开发、地产文旅、金融资管、酒类文化、贵金属文创等多个领域，是一家多元化综合性实业集团，业务分布在北京、上海、甘肃、青海、内蒙古、陕西、四川、安徽、天津、深圳等10多个省、市和自治区。</p>
                        </div>
                        <div class="conn1_2">
                            <div class="conn1_2_1">
                                <p>第一个</p>
                                <p>第二个</p>
                                <p>第三个</p>
                                <p>第四个</p>
                            </div>
                        </div>
                        <div class="conn1_3">
                            <img src="../assets/dh/dh_1.jpeg">
                        </div>
                    </div>
                    <el-link class="el_li" @mouseenter.native="index=2">
                        <router-link to="/wrj/three">盛达新闻</router-link>
                    </el-link>
                    <div class="conn1" v-if="index==2" @mousemove.naive="index=0">
                        <div style="width: 600px; height: 300px; margin: 30px 0 350px 0">
                            <div style="text-align: left; font-size: 18px ">盛达新闻</div>
                            <p style="text-align: left ; font-size: 14px ">聚集公司实时动态，发布盛达集团最新新闻，欢迎您的关注！</p>
                        </div>
                        <div class="conn1_2">
                            <div class="conn1_2_1">
                                <p>集团新闻</p>
                                <p>媒体聚焦</p>
                                <p>企业责任</p>
                                <p>公告</p>
                            </div>
                        </div>
                        <div class="conn1_3">
                            <img src="../assets/dh/dh_2.jpeg">
                        </div>
                    </div>
                    <el-link class="el_li" @mouseenter.native="index=3">
                        <router-link to="/wrj/four">盛达产业</router-link>
                    </el-link>
                    <div class="conn1" v-if="index==3" @mouseleave.naive="index=0">
                        <div style="width: 600px; height: 300px; margin: 30px 0 350px 0">
                            <div style="text-align: left; font-size: 18px ">盛达产业</div>
                            <p style="text-align: left ; font-size: 14px ">集团历经二十多年的发展，现已成为集矿业开发、地产建筑、金融资管、商业文旅、酒类文化、贵金属文创等为一体的多元化综合性实业集团。旗下拥有甘肃、北京两个集团总部，下辖资产管理公司、基金投资公司、大型铅锌矿山、专科医院、商业中心、温泉度假酒店、旅游文化影视基地、贵金属加工制作、房地产开发及一级资质建设集团等数十家实体企业。</p>
                        </div>
                        <div class="conn1_2">
                            <div class="conn1_2_1">
                                <p>第一个</p>
                                <p>第二个</p>
                                <p>第三个</p>
                                <p>第四个</p>
                            </div>
                        </div>
                        <div class="conn1_3">
                            <img src="../assets/dh/dh_3.jpeg">
                        </div>
                    </div>
                    <el-link class="el_li" @mouseenter.native="index=4">
                        <router-link to="/wrj/five">加入盛达</router-link>
                    </el-link>
                    <div class="conn1" v-if="index==4" @mouseleave.naive="index=0">
                        <div style="width: 600px; height: 300px; margin: 30px 0 350px 0">
                            <div style="text-align: left; font-size: 18px ">加入盛达</div>
                            <p style="text-align: left ; font-size: 14px ">"用人唯才，人尽其才"。人才是企业的灵魂，盛达集团视人才为最大财富，始终把人才视为企业的发展之本、竞争之本、未来之本。 盛达集团为员工提供一个能发挥才能的宽广舞台，展示才华的广阔空间，做到发现人才、培养人才、尊重人才、发展人才。</p>
                        </div>
                        <div class="conn1_2">
                            <div class="conn1_2_1">
                                <p>第一个</p>
                                <p>第二个</p>
                                <p>第三个</p>
                                <p>第四个</p>
                            </div>
                        </div>
                        <div class="conn1_3">
                            <img src="../assets/dh/dh_4.jpeg">
                        </div>
                    </div>
                    <el-link class="el_li" @mouseenter.native="index=5">
                        <router-link to="/wrj/six">盛达党建</router-link>
                    </el-link>
                    <div class="conn1" v-if="index==5" @mouseleave.naive="index=0">
                        <div style="width: 600px; height: 300px; margin: 30px 0 350px 0">
                            <div style="text-align: left; font-size: 18px ">盛达党建</div>
                            <p style="text-align: left ; font-size: 14px ">盛达集团成立于1992年，从甘肃发展壮大，历经近三十年的发展，产业布局矿业开发、地产文旅、金融资管、酒类文化、贵金属文创等多个领域，是一家多元化综合性实业集团，业务分布在北京、上海、甘肃、青海、内蒙古、陕西、四川、安徽、天津、深圳等10多个省、市和自治区。</p>
                        </div>
                        <div class="conn1_2">
                            <div class="conn1_2_1">
                                <p>第一个</p>
                                <p>第二个</p>
                                <p>第三个</p>
                            </div>
                        </div>
                        <div class="conn1_3">
                            <img src="../assets/dh/dh_5.jpeg">
                        </div>
                    </div>
                    <el-link class="el_li" @mouseenter.native="index=6" href="http://www.baidu.com">
                        <router-link to="/wrj/seven">联系盛达</router-link>
                    </el-link>
                    <div class="conn1" v-if="index==6" @mouseleave.naive="index=0">
                        <div style="width: 600px; height: 300px; margin: 30px 0 350px 0">
                            <div style="text-align: left; font-size: 18px ">联系盛达</div>
                            <p style="text-align: left ; font-size: 14px ">您对于我们非常重要！为了更快捷地了解您的需求，请您及时与我们联系，我们会尽快安排人员与您联系处理，竭诚为您服务！</p>
                        </div>
                        <div class="conn1_2">
                            <div class="conn1_2_1">
                                <p>第一个</p>
                            </div>
                        </div>
                        <div class="conn1_3">
                            <img src="../assets/dh/dh_6.jpeg">
                        </div>
                    </div>
                </div>
            </el-header>
            <el-main>
                <router-view/>
            </el-main>

            <el-footer>
                <div class="m2">
                    <span>Copyright 2017 盛达集团 版权所有 京ICP备18047628号-1  甘公网安备 62010202002587号</span>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'WrjHome',
        data() {
            return {
                index:0,
            }
        },
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hello{
        font-family: "微软雅黑";
    }
    .el-link{
        font-weight: initial;
    }
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: black;
        text-decoration: none;
    }

    .head {
        height: 80px;
        position: relative;
    }

    .m {
        height: 100px;
        margin-left: 100px;
    }

    .m2 {
        height: 100px;
        width: 1425px;
        margin-left: -20px;
    }

    .lf {
        float: left;
    }

    .dh {
        margin-top: -40px;
        text-align: center;
    }
    .el_li{
        font-size: 17px;
        margin-right: 60px;
    }
    .el-card__body, .el-main {
        padding: 0px;
    }
    .conn1{
        background-color: rgba(221, 221, 221, 0.88);
        width: 100%;
        height: 300px;
        margin-left: -30px;
        position: absolute;
        z-index: 99;
        justify-content:center;
        display: flex;
    }
    .conn1_2{
        width: 200px;
        text-align: left;
        border: 1px lavender solid;
    }
    .conn1_2_1 >p{
        border-bottom: 1px lavender solid;
    }
    .conn1_2_1{
        margin: 60px 0 0 30px;
    }
    .conn1_3{
        margin: 80px 0 0 90px;
        width: 300px;
        text-align: left;
    }
    .conn1_3 > img{
        width: 250px;
        height: 150px;
    }

</style>
